<script>
export default {
    data() {
        return {
            id: ''
        }
    },
    // 组件复用 不会重新挂载 mounted 只会执行一次
    mounted() {
        this.id = this.$route.params.id
    },
    methods: {
        getData() {
            console.log("查询" + this.id + "的数据")
        }
    },
    created() {
        // this.id = this.$route.params.id
        // this.getData()
        // // 监听 this.$route.params 的改变 当发生改变 执行 handler()
        // this.$watch(
        //     () => this.$route.params,
        //     (newVal, oldVal) => {
        //         this.id = this.$route.params.id
        //         this.getData()
        //     }
        // )
    },
    // TODO 计算属性
    // 路由守卫
    beforeRouteUpdate(to, from) {
        console.log(to.params.id)
        this.id = to.params.id
    }
}
</script>

<template>
    <h2>商品{{ id }}的详细信息</h2>
</template>

<style scoped>

</style>